
<template>
    <div class="login-shou">
        <div class="btn" v-for="item in mybutton" :key="item.id" @click="cellLogin(item.id)">
            <span :class="item.icon" :style="item.colors"></span>
            <p>{{ item.text }}</p>
        </div>
    </div>
</template>

<script lang="ts" setup>
import router from '@/router';

defineProps(['mybutton']);
const cellLogin=async(id:number)=>{
    if(id==1) await router.push({path:'/phonecode'})
}
</script>

<style lang="scss" scoped>
.login-shou {
    height: 12rem;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.btn {
    width: 14rem;
    height: 4rem;
    border-radius: 0.5rem;
    border: 0.1rem solid #dddee0;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    font-size: 1.4rem;
    .iconfont{
        font-size: 2rem;
        margin: 0 1.3rem;
    }
}

</style>